@import 'mixin.scss';
@import 'table.scss';

@include card-title;


.card-section{
	float: left;
	width: calc(50% - 5px);
	height: calc(50% - 5px);
	background: url("../img/box-body.png") center no-repeat;
	background-size: 100% 100%;
	padding: 0 10px;

	.wrate-50{
		width: 50%;
		height: 100%;
	}

	.circle-plus{
		display: flex;
		flex-wrap: wrap;
	}

	.circle-ui{
		width: 50%;
		height: 50%;
		padding:10px;

		canvas{
			width: 100%;
			height: 100%;
		}
	}
	.device-number-plus-chart{
		width: 100%;
		height: 100%;
		.device-number-plus{
			flex-grow: 1;
			height: 100%;
			display: flex;
			li{
				width: 33%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
				padding-top:60px;
				padding-bottom:10px;
				.value{
					width: 40px;
					height: 40px;
					background:#0F37BB;
					margin-bottom: 6px;
					text-align: center;
					line-height: 40px;
					border-radius: 4px;
					box-shadow:2px 2px 7px rgba(0, 0, 0,0.3);
				}
				.line{
					width: 10px;
					height: 0;
					align-items: flex-end;
					border-radius: 36px 36px 0px 0px;
				}
			}
		}
		.lenged{
			min-width: 120px;
			height: 100%;
			position:relative;
			ul{
				position: absolute;	
				bottom: 10px;
				left: 0;
				width: 100%;
				li{
					display: flex;
					align-items:center;
					line-height: 26px;
					color:rgba(255,255,255,0.8);
					i{
						width: 10px;
						height: 10px;
						border-radius:50%;
						margin-right: 4px;
					}
					span{
						margin-left: 4px;
					}
				}
			}
		}
	}
	.lenges{
		position:absolute;
		right: 10px;
		top:0;
		display: flex;
		span{
			height: 36px;
			width: 80px;
			color:rgba(255,255,255,0.8);
			cursor: pointer;
			line-height: 36px;
			text-align: center;

		}
		.active{
			background:rgba(9, 70, 255, 0.34);
		}
	}
	.silder-title{
		height: 40px;
		display: flex;
		
		span{
			width: 100px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			color:rgba(255,255,255,0.8);
			cursor: pointer;
			border:1px solid #008EFF;
		}
		span.on{
			background:rgba(9, 70, 255, 0.34);
		}
		span:nth-child(1){
			border-radius:8px 0 0 2px;
		}
		span:nth-child(2){
			border-left:none;
			border-right:none;
		}
		span:nth-child(3){
			border-radius:0 2px 8px 0;
		}
	}
	.type-container{
		height: calc(100% - 40px);
	}
	.type-ul{
		height: 100%;
		display: flex;
		li{
			height: 99%;
			position:relative;

			.chart-box{
				width: 100%;
				height: 100%;
			}

			.bg-box{
				position:absolute;
				width: 475px;
				height: 165px;
				top: calc(50% - 88px);
				right: -4px;
				background:url("../img/bg-img.png") left center no-repeat;
				background-size:100% 100%;
				pointer-events: none;
			}
		}
	}
	.water-rate{
		width: 100%;
		height: 100%;
	}
	.lenges-water{
		display: none;
	}
}